<template>
  <div class="heard">
    <div class="t">
      <div class="leftbox">
        <div class="f">
          <slot name="left" />
        </div>
      </div>
      <div class="r">
        <slot name="right" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {},
}
</script>
<style lang="less" scoped>
.heard {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
  .t {
    display: flex;
    justify-content: space-between;
    .leftbox {
      display: flex;
      flex-direction: column;
    }

    .f {
      flex: 1;
    }
    .r {
      .b {
        display: flex;
        justify-content: flex-end;
        margin-top: 5px;
        background-color: palegreen;
        font-size: 14px;
        color: #333333;
        font-family: 'Arial Normal', 'Arial';
        font-weight: 400;
        font-style: normal;
      }
    }
  }
}
</style>
